<%--
  Created by IntelliJ IDEA.
  User: 17420
  Date: 2021/7/30
  Time: 10:37
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>登录</title>

    <style>
        a{
            text-decoration: none;
            color:inherit;
        }

        *{
            margin:0;
            padding:0;
        }

        body{
            background-image:url("img/背景.jpg");
        }

        .loading_dialog{
            /*width:25%;*/
            width: 380px;

            height:auto;
            background-color:#fff;
            border-radius: 20px;
            position:absolute;
            top:20%;
            /*left:35%;*/
            left:50%;
            margin-left: -190px;

            padding-bottom:60px;
            text-align: center;
            letter-spacing:5px;
        }

        .account,.code{
            width:200px;
            position:relative;
            top:0px;
            left:0px;
            border:2px solid #BEBEBE;
        }

        .account:focus,.code:focus{
            outline: none;
            border:2px solid #000;
        }

        .loading_dialog button{
            width:70px;
            height:30px;
            background-color: #313438;
            border-radius: 5px;
            position:relative;
            top:0px;
            left:0px;
            border:none;
            color:white;
        }

        .loading_dialog button:hover{
            background-color:#000000;
            cursor:pointer;
        }

        .title{
            width:100%;
            height:100px;
            background-color: #313438;
            text-align: center;
            line-height: 100px;
            border-top-right-radius: 20px;
            border-top-left-radius: 20px;
            color:white;
            margin-bottom: 40px;
            font-size: 20px;
        }
    </style>
    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>   <!--引入jquery库-->
    <script>
        window.onload=function(){

            //重置表单：
            $('#reset').on('click',function(){
                $('.account').val("");
                $('.code').val("");
                $('input:radio[name=identity]').attr('checked',false);
            })


            //验证表单：
            $('#login').on('click',function(e){
                if($('.account').val()==null||$('.account').val()==""){
                    alert("账号不能为空！");
                    e.preventDefault();
                }

                else if($('.code').val()==null||$('.code').val()==""){
                    alert("密码不能为空！");
                    e.preventDefault();
                }

            })

        }
    </script>
</head>
<body>
<div class="loading_dialog" id="loading_dialog">
    <div class="title">
        <p>线上电影评分系统</p>
    </div>
    <form action="Login" method="post">
        账号: <input class="account" id="account" type="text" name="username" ><br><br>
        密码：<input class="code" id="code" type="password" name="password" ><br><br>
        身份：<input type="radio" name="type" value="user" checked>&nbsp;普通用户&nbsp;<input type="radio" name="type" value="admin">&nbsp;管理员<br><br><br>
        <button id="login">登录</button>&nbsp;&nbsp;
        <button  id="registered"><a href="register.jsp">注册</a></button>&nbsp;&nbsp;
        <button id="reset">重置</button>
    </form>


</div>
</body>
</html>

